{% extends 'base.html' %}
{% block title %}{{media.title}}{% endblock %}

{% block content %}
{% block video %}
    <div id="video-{{media.id}}" class="h-entry row">
    {% block videocontainer %}
        <div class="col-md-8 col-sm-10 ">
        {% block videoplayer %}
            <div class="video-player container row col-xs-12">
            <video class="media-player" controls poster="{{media.poster.url}}">
                <source src="/media/{{media.upload}}" controls>
            </video>
            </div>
            {% endblock %}
            {% block videodata %}
            <div class="video-data container row col-xs-12">
                <h2 class="p-name p-url"><a href="{{media.permalink}}">{{media.title}}</a></h2>
                <p>Uploaded by <a class="p-author" href="{% url "accounts:detail" pk=media.user.pk %}" class="p-name">{{ media.user.username }}</a>{% if media.user == request.user %} <a href="{% url "media_edit" pk=media.pk %}">edit</a>{% endif %}</p>
                <p class="p-description">{{media.description}}</p>
                <h3>Streams</h3>
                Make downloadable separately.
                <ul>
                {% for stream in media.mediastream_set.all %}
                <li>{{stream.codec_type}}: {{stream.codec_name}} [<a href="{{stream.url}}">download in MKV</a>]</li>
                {% endfor %}
                </ul>
            </div>
        {% endblock %}
        </div>
        {% block videoformats %}
        <div class="col-md-4 col-sm-2">
        <h3>Download</h3>
        <ul class="nav nav-pills">
            <li><a href="download/format1">format1</a></li>
            <li><a href="download/format2">format2</a></li>
            <li><a href="download/format3">format3</a></li>
        </ul>
        </div>
        {% endblock %}
        {% block videotags %}
        <div class="col-xs-12">
        <h3>Tags</h3>
        <ul class="tags">
            {% for tag in media.tags.iterator %}
            <li class="tag label btn-info md"><a href="{% url 'tag_list' tag.slug %}">{{tag.name}}</a></li>
            {% endfor %}
        </ul>
        </div>
        {% endblock %}
    </div>
    {% endblock %}
{% endblock %}
{% endblock %}
